import React, { Component } from "react"
import { Route, Switch, Redirect, NavLink } from "react-router-dom"
import "./home.css"
import Shouye from "../shouye/shouye"
import Fenlei from "../fenlei/fenlei"
import Shopping from "../shopping/shopping"
import Center from "../center/center"
import Login from "../login"

export default class Home extends Component {
    constructor(props){
        super(props)
        this.getTitle(this.props.location.pathname)
        this.props.history.listen(location=>{
          // console.log(location)
          this.getTitle(location.pathname)
      })
      }
    componentDidMount(){
        this.getTitle()
    }
      getTitle(path){
        switch(path){
            case "/home/shouye":document.title="主页";break;
            case "/home/fenlei":document.title="分类页";break;
            case "/home/shopping":document.title="购物车";break;
            case "/home/center":document.title="个人中心";break;
            default: break
        }
    }
    render() {
        return <div>
            
            <div className="fix">
                <NavLink to="/home/shouye">
                    <span className="iconfont icon-icon"></span>
                    <p>首页</p>
                </NavLink>
                <NavLink to="/home/fenlei">
                    <span className="iconfont icon-fenlei"></span>
                    <p>分类</p>
                </NavLink>
                <NavLink to="/home/shopping">
                    <span className="iconfont icon-gouwuche"></span>
                    <p>购物车</p>
                </NavLink>
                <NavLink to="/home/center">
                    <span className="iconfont icon-personalCenter"></span>
                    <p>个人中心</p>
                </NavLink>
            </div>
            <Switch>


                <Route path="/home/shouye" render={(props) =>{
                    // console.log(this.props,5555)
                    sessionStorage.setItem('path',this.props.location.pathname) //用以记录设置权限的路由地址，方便验证通过后的跳转
                    return sessionStorage.getItem('user')?<Shouye {...props} n={5}/>:<Redirect to="/home/login" exact/>
                }}/>
                <Route path="/home/login" component={Login}/>
                <Route path="/home/fenlei" component={Fenlei} />
                <Route path="/home/shopping" component={Shopping} />
                <Route path="/home/center" component={Center} />
                <Redirect from="/home" to="/home/shouye" exact />
            </Switch>

        </div>
    }
}